<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>layui在线调试</title>
    <link rel="stylesheet" href="/layui/plugins/layui/css/layui.css" media="all" />
    <script src="/layui/plugins/layui/layui.js"></script>
    <script src="/main/js/jquery.min.js"></script>
    <style>
        body{margin: 10px;}
        .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
    </style>
</head>
<body>

    <input id="userName" name="userName" type="hidden" th:value="${session.user}"/>
    <input id="url" name="url" type="hidden" th:value="${url}"/>
    <input id="count" name="count" type="hidden" />
    <input id="pageNum" name="pageNum" type="hidden" />
<div style="margin: 15px;">
    <fieldset class="layui-elem-field">
        <legend>个人文章管理 </legend>
        <table id="pageList" class="layui-table" lay-filter="demo">
        </table>
    </fieldset>
</div>

<div id="pageDemo"></div>

<script type="text/html" id="barDemo">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-small" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-danger layui-btn-small" lay-event="del">删除</button>
        <button class="layui-btn layui-btn-warm layui-btn-small " lay-event="detail">查看标签</button>
        <button class="layui-btn layui-btn-normal layui-btn-small" lay-event="col">修改专题</button>
        <button class="layui-btn layui-btn-small" lay-event="com">评论管理</button>
    </div>
</script>
<script>
    var username = document.getElementById("userName").value;
    var url = '/paper/findPaperByName/'+username+'/1';
    var nurl = document.getElementById("url").value;
    var turl = null;
    if (nurl == ''||nurl == null||nurl==undefined){
        turl = url;
    }else turl = nurl;
    var count = null;
    var currPage = null;
    layui.use(['laypage', 'layer', 'table', 'element'], function(){

          layer = layui.layer;//弹层
          table = layui.table; //表格
          element = layui.element;//元素操作
          laypage = layui.laypage; //分页
//        table.init('filter', options); //转化静态表格
        table.render({
            id:'tid',
            elem:'#pageList',
            width:1350,
//            page:'true',
            url:turl,
            cols: [[
                {field:'paperId', title: '文章ID', width:80, sort: true}
                ,{field:'paperTitle', title: '文章名称', width:400, sort: true}
                ,{field:'theme', title: '所属主题', width:144, sort: true}
                ,{field:'createTime', title: '创建时间', width:220, sort: true}
                ,{field:'is_pass', title: '文章状态', width:100}
                ,{toolbar:'#barDemo', title: '操作', width:330}
            ]]
        });

        $.ajax({
            url:turl,
            dataType:"json",   //返回格式为json
            type:"get" , //请求方式 get 或者post
            success:function (data) {
                page(data);
            }
        });
        function page(data) {
            count = data.count;
            currPage = data.pageNum;
            //分页 ajax 可以的到当前的count
            laypage.render({
                elem: 'pageDemo' //分页容器的id
                , limit: 10
                , count: count
                , curr: currPage
                , skin: '#1E9FFF' //自定义选中色值
                , skip: true //开启跳页
                , prev: '上一页 '
                , next: ' 下一页'
                , jump: function (obj, first) {
                    if (!first) {
                        var currentPage = obj.curr;//获取点击的页码
//                        alert(obj.curr);
                        url = '/paper/findPaperByNam:w' +
                            'e/' + username + '/' + currentPage;
                        window.location.href = '/cte?url=' + url;
                    }
                }

            });



            //监听工具条
            table.on('tool(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data;//获得当前行数据
                id = data.paperId,

                layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'detail') {
                    layer.msg('查看操作');
                    layer.open({
                        type: 2,
                        area: ['700px', '450px'],
                        content: '/tag/tagPage/'+id
                    });
                    // 这里应该是一个弹窗 内容大概是 为文章添加一个标签.删除某个标签 不做分页
                } else if (layEvent === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构

                        $.ajax({
                            url:"/paper/delect/"+id,    //请求的url地址
                            dataType:"json",   //返回格式为json
                            type:"post",   //请求方式
                            success:function (data) {
                                if (data == '1'){
                                    layer.confirm('删除成功')
                                }
                                else {
                                    layer.confirm('删除出错')
                                }
                            }
                        });
                        layer.close(index);
                    });
                } else if (layEvent === 'edit') {
                    layer.open({
                        type: 2,
                        area: ['1200px', '650px'],
                        content: '/updatePageContent/'+id
                    });
                } else if(layEvent === 'col'){
                    layer.open({
                        type: 2,
                        area: ['700px', '450px'],
                        content: '/column/updateTheme'
                    });
                }
                else if(layEvent === 'com'){
                    layer.open({
                        type: 2,
                        area: ['700px', '450px'],
                        content: '/comments/getComments'
                    });
                }
            });
        }

    });

</script>

</body>
</html>